<template>
  <div class="home-main">
    <div class="header"></div>
    <div class="btn" @click="go">点击</div>
    <div class="wrapper">
      <div class="content">
        <div class="banner">
          <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="m in bannerImgs" :key="m.id">
              <img :src="m.img" alt />
            </swiper-slide>
          </swiper>
          <div class="swiper-pagination" slot="pagination"></div>
        </div>

        <ul>
          <li
            class="li-item"
            :class="['li-'+li]"
            v-for="li in liList"
            :key="li"
            @click="say(li)"
          >li-{{li}}</li>
        </ul>
      </div>
      <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
    <!-- //百度地图容器 -->
    <div id="allmap"></div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Mock from "mockjs";
import BScroll from "@better-scroll/core";
const Random = Mock.Random;
// cli天然支持 json数据的引入
import cityData from "./city/data.json";
export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1.2,
        spaceBetween: 20,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      bannerImgs: [
        {
          id: Random.guid(), // 图片资源再jis中的引用 必须用 require
          img: require("@/assets/imgs/home/banner1.jpg")
        },
        {
          id: Random.guid(), // 图片资源再jis中的引用 必须用 require
          img: require("@/assets/imgs/home/banner2.jpg")
        },
        {
          id: Random.guid(), // 图片资源再jis中的引用 必须用 require
          img: require("@/assets/imgs/home/banner3.jpg")
        }
      ],
      liList: [],
      cityData
    };
  },
  created() {
    console.log("cityData", this.cityData);
  },
  mounted() {
    let wrapper = document.querySelector(".wrapper");
    this.scroll = new BScroll(wrapper, {
      click: true
    });

    this.initLis();
    // 获取位置
    this.initPosition();
  },
  methods: {
    initLis() {
      setTimeout(() => {
        for (var i = 0; i < 20; i++) {
          this.liList.push(i + 1);
        }
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }, 2000);
    },
    say(li) {
      console.log("li:", li);
    },
    go() {
      // scrollToElement(el, time, offsetX, offsetY, easing)
      var el = document.querySelector(".li-item.li-10");
      this.scroll.scrollToElement(el, 400, 0, 100);
    },
    initPosition() {
      var map = new BMap.Map("allmap");

      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            // var mk = new BMap.Marker(r.point);
            // map.addOverlay(mk);
            // map.panTo(r.point);
            console.log("您的位置：" + r.point.lng + "," + r.point.lat);
            // 地址逆向解析
            var point = new BMap.Point(r.point.lng,r.point.lat);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs) {
              var addComp = rs.addressComponents;
              alert(
                addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber
              );
            });
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/common/common.scss";
.home-main {
  height: 100%;
  .btn {
    position: fixed;
    right: 50px;
    top: 200px;
    width: 50px;
    height: 50px;
    background-color: red;
    z-index: 999;
  }
  .header {
    width: 100%;
    height: $baseHead;
    background-color: green;
  }
  .banner {
    width: 100%;
    height: 156px;
    .swiper-container {
      height: 145px;
      .swiper-slide {
        &.swiper-slide-active {
          transform: scaleY(1);
        }
        transform: scaleY(0.85);
        transition: all ease 0.4s;
        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }
    }
    .swiper-pagination {
      width: 100%;
      height: 3px;
      // 如果需要修改组建内部样式  需要用到穿透
      ::v-deep .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        background-color: #b2b2b2;
        border-radius: 2px;
        margin: 0 4px;
        transition: all ease 0.4s;
        &.swiper-pagination-bullet-active {
          width: 14px;
          height: 3px;
        }
      }
    }
  }
  .wrapper {
    width: 100%;
    height: 100%;
    background-color: lightblue;
    overflow: hidden;
    .content {
      li {
        height: 40px;
        background-color: yellow;
        margin: 10px auto;
        color: #000;
        font-size: 36px;
      }
      padding-bottom: 160px;
    }
  }
}
</style>